<template>
	<view class="list">
		<view class="hd" v-if="isHead">
			<!-- <view class="flex1 color-E8CDA7 font32 fwb">
				评论
				<text v-if="commentNum" class="color-E8CDA7 font24">({{ commentNum }})</text>
			</view> -->
			<view class="tabs-nav fboxRow Ycenter">
				<view class="tabs-item fboxRow Ycenter font32 active" >评论<text class="font24">({{ commentNum > 10000 ? (commentNum / 10000).toFixed(1) + 'W' : commentNum}})</text></view>
			</view>
			<!-- <u-tabs
				lineColor="#e8cda7"
				:activeStyle="{
					color: '#e8cda7'
				}"
				:inactiveStyle="{
					color: '#6B707C'
				}"
				:list="myList"
				@click="changeItem"
			></u-tabs> -->
			<!-- <view class="right color-6B707C font26 right-text">
				<text>{{ forwardNum }} 转发</text>
			</view> -->
		</view>
		<view class="bd">
			<template v-if="list && list.length != 0">
				<view v-for="(item, index) in list" :key="index" class="user-comment fboxRow">
					<image class="avatar" mode="aspectFill" round :src="item.avatar" />
					<view class="fboxCol flex1">
						<view class="sub-hd fboxRow Ycenter font32">
							<view class="flex1">{{ item.realName }}</view>
							<!-- <view class="right" @tap="openOperation(item, index)"><u-icon name="more-dot-fill"></u-icon></view> -->
						</view>
						<view class="sub-bd mt10">
							<view class="content font30 font-w300">{{ item.commentContent || item.content }}</view>
							<view class="reply-box mt20 color-121575" v-if="item.replyList && item.replyList.length">
								<view v-for="(item2, sub) in item.replyList" :key="sub">
									<text class="color-name">{{ item2.realName }}</text>
									<template v-if="item.replyType == 1">
										回复
										<text class="color-name font30">@{{ item2.replyRealName }}</text>
									</template>
									<text class="color-name">：</text>

									<text class="font30 reply-con">{{ item2.replyContent || item2.content || item2.commentContent }}</text>
								</view>
								<view class="more color-name" v-if="item.replyNum > 2" @tap="getcircleReplies(item)">
									查看全部{{ item.replyNum }}条回复
									<!-- <u-icon name="arrow-right-double"></u-icon> -->
									<text class="more_icon color-name bwfont"></text>
								</view>
							</view>
						</view>
						<view class="sub-ft fboxRow Ycenter">
							<view class="flex1 font24">{{ dateFormat(item.gmtCreate) }}</view>
							<view class="right fboxRow Ycenter font24">
								<text @click="contentDd(item)" class="bw-a-zu3304 bwfont m-r10 font26"></text>
								<view class="fboxRow Ycenter" :class="item.isLike == 0 ? '' : 'avtive'" style="margin-left: 40rpx;" @tap="clickLike(item)">
									<!-- <text class="bwfont bw-Vector3 font26"></text> -->
									<text :class="{ 'bw-weidianzan': item.isLike == 0, 'bw-dianzan': item.isLike != 0}"
										class="bwfont font26" style="margin-right: 6rpx;"></text>
									<text class="font28 font-w300">{{ item.likeNum || '点赞' }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</template>
			<!-- <NotEmpty v-if="list.length == 0" :height="200"></NotEmpty> -->
		</view>
		<u-action-sheet
			cancelText="取消"
			@select="selectSheet"
			@close="closeSheet"
			:closeOnClickOverlay="true"
			:closeOnClickAction="true"
			:actions="copyList"
			:show="copyListShow"
		></u-action-sheet>
	</view>
</template>

<script>
import { delCircleReplies, commentUnlike, commentLike, companyCommentLike } from '@/api/h5.js';
import { dateFormat } from '@/static/js/common.js';
export default {
	props: {
		list: {
			type: Array,
			default() {
				return [];
			}
		},
		commentNum: {
			type: Number,
			default: 0
		},
		likeNum: {
			type: Number,
			default: 0
		},
		forwardNum: {
			type: Number,
			default: 0
		},
		userId: {
			type: String,
			default: ''
		},
		isHead:{
			type: Boolean,
			default: true,
		},
		type: {
			type: String,
			default: 'user' // user用户评论，enterprise企业评论
		},
	},
	emits: ['fbContent', 'puperBounced'],
	data() {
		return {
			dateFormat,
			copyListShow: false,
			copyList: [{ name: '删除', value: 0 }, { name: '复制', value: 1 }],
			contentText: '',
			commentId: '',
			myList: [
				{
					name: '评论',
					value: 0,
					bracket: {
						value: 0
					}
				}
				// {
				// 	name: '浏览',
				// 	value: 1,
				// 	bracket: {
				// 		value: 0
				// 	}
				// },
				// {
				// 	name: '点赞',
				// 	value: 2,
				// 	bracket: {
				// 		value: 0
				// 	}
				// }
			]
		};
	},
	methods: {
		// 判断是否登录
		judgeIsLogin() {
			const bw_params = JSON.parse(uni.getStorageSync('bw_params') || '{}');
			const bw_user_temp = JSON.parse(uni.getStorageSync('bw_user_temp') || '{}');
			if (bw_params && bw_params.access_token && bw_user_temp && bw_user_temp.memberId) {
				return true;
			} else {
				return false;
			}
		},
		// 点赞
		clickLike(data) {
			if (!this.judgeIsLogin()) {
				this.$emit('puperBounced');
				return;
			}
			console.log('clickLike', this.type)
			if(this.type == 'user'){
				let obj = {
					busMemberId: data.memberId,
					businessId: data.commentId,
					memberId: this.userId
				};
				if (data.isLike == 0) {
					commentLike({ ...obj }).then(res => {
						data.isLike = 1;
						data.likeNum++;
					});
				} else {
					commentUnlike({ ...obj }).then(res => {
						data.isLike = 0;
						data.likeNum--;
					});
				}
			}
			if(this.type == 'enterprise'){
				companyCommentLike({
					commentId: data.id,
					type: data.isLike == 1 ? 0 : 1
				}).then(res => {
					if(data.isLike == 1){
						data.isLike = 0
						data.likeNum--;
					}else{
						data.isLike = 1
						data.likeNum++;
					}
				});
			}
		},
		contentDd(item) {
			this.$emit('fbContent', item);
		},
		// 删除评论
		deleteReplie() {
			delCircleReplies({ commentId: this.commentId }).then(res => {
				console.log(res);
			});
		},
		// 选择操作
		selectSheet(data) {
			if (data.value == 0) {
				//删除
				this.deleteReplie();
			} else {
				// 复制
				this.copyData();
			}
		},
		// 复制链接
		copyData() {
			let textarea = document.createElement('textarea');
			textarea.value = this.contentText;
			textarea.readOnly = 'readOnly';
			document.body.appendChild(textarea);
			textarea.select(); // 选择对象
			textarea.setSelectionRange(0, this.contentText.length); // 核心
			let result = document.execCommand('copy'); // 执行浏览器复制命令
			if (result) {
				uni.showToast({
					title: '复制成功',
					duration: 2000
				});
			}
			textarea.remove();
		},
		closeSheet() {
			this.copyListShow = false;
		},
		// 打开操作  复制或者删除
		openOperation(item, index) {
			this.copyListShow = true;
			this.contentText = item.commentContent;
			this.commentId = item.commentId;
		},
		// 获取回复列表  查看更多
		getcircleReplies(data) {
			getApp().globalData.moreReplie = {};
			if (!this.judgeIsLogin()) {
				this.$emit('puperBounced');
				return;
			}
			getApp().globalData.moreReplie = { ...data };
			this.$pageTo('/replieMore');
		}
	}
};
</script>

<style scoped lang="scss">
	
.tabs-nav{padding: 0 20rpx;height: 88rpx;border-bottom: 1rpx solid var(--backgroundDivisionColor);}
.tabs-nav .tabs-item{padding: 0 20rpx;height: 88rpx;position: relative;}
.tabs-nav .tabs-item.active{font-weight: bold;}

::v-deep .u-popup__content {
	background-color: var(--controllerBgColor);
	.u-gap {
		display: none;
	}
	.u-line {
		display: none;
	}
	.u-action-sheet__item-wrap__item__name {
		color: #acb4c7;
	}
	.u-action-sheet__cancel-text {
		color: #6b707c;
	}
	.u-action-sheet__cancel-text {
		background-color: #141720;
	}
	.u-action-sheet--hover {
		background-color: var(--controllerBgColor);
	}
}
.more_icon {
	padding-left: 10rpx;
	&:before {
		content: '\e63b';
		font-size: 12rpx;
		vertical-align: middle;
	}
}
.color-name {
	color: var(--contourButtonTextColor);
}
.list {
	// padding: 30rpx;
	background-color: var(--viewBgColor);
	
}
.list .bd{padding: 0 24rpx;}
.right-text {
	flex: 1;
	text-align: right;
}
.user-comment {
	padding-top: 37rpx;
}
.user-comment .avatar {
	width: 64rpx;
	margin-right: 20rpx;
	height: 64rpx;
	border-radius: 50%;
}
.user-comment .sub-hd {
	height: 64rpx;
}
.user-comment .content{color: var(--contentFontDarkColor);}
.user-comment .sub-ft {
	margin-top: 30rpx;
	padding-bottom: 30rpx;
	color: var(--contentFontFourColor);
}
.bw-Vector3{margin-right: 6rpx;}
.avtive{color: var(--senderViewColor);}
.reply-box {
	padding: 30rpx;
	background: var(--viewDivisionColor);
	color: var(--contourButtonTextColor);
	line-height: 60rpx;
	border-radius: 12rpx;
}
.reply-con{color: var(--contentFontDarkColor);}
.color-E8CDA7 {
	color: var(--titleFontColor);
}
.color-ACB4C7 {
	// color: #acb4c7;
	color: var(--contentFontDarkColor);
}
.color-6B707C {
	color: #6b707c;
}
.color-21242C {
	color: var(--viewBgColor);
}
</style>
